<template>
	<view class="app-container mine-bg">
		<view class="user-info-box">
			<view @click="go('/pages/subPackage/person')">
				<image :src="user.avatar" style="width: 124rpx;max-height: 124rpx;border-radius: 50%;" mode="widthFix">
				</image>
			</view>
			<view class="user-info" v-if="user.token">
				<view @click="go('/pages/subPackage/person')">
					<text class="white-font">{{ user.nickname }}</text>
				</view>
				<view style="display: flex;flex-direction: row;align-items: center;" class="white-font"
					@click="copyTextToClipboard(user.referenceCode)">
					ID: {{ user.referenceCode }}
					<image src="https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/copy.png"
						style="width: 32rpx;height: 32rpx;margin-left: 3px;"></image>
				</view>
			</view>
			<text v-else @click="gotoLogin" class="white-font" style="padding-left: 20rpx;">登录</text>
		</view>


		<view class="wallet-box">
			<view class="white-font wallet-item" @click="gotoscorelist">
				<text class="wallet-price">{{ wallet.score }}</text>
				<view class="wallet_title">
					<text class="title">欧我币</text>
					<image src="/static/owo/mine-list-go.png" class="icongo"></image>
				</view>
			</view>
			<view class="white-font wallet-item" @click="gotoscorelist">
				<text class="wallet-price">{{ wallet.ticket }}</text>
				<view class="wallet_title">
					<text class="title">积分</text>
					<image src="/static/owo/mine-list-go.png" class="icongo"></image>
				</view>
			</view>
			<!-- <view class="white-font wallet-item" @click="gototicketlist">
				<van-image width="1.4rem" height="1.4rem" src="/static/icons/mine/wallet-z-meta.png" />
				<text class="wallet-price">Z元素：{{ wallet.ticket }}</text>
			</view> -->
		</view>

		<view class="func-box">
			<view v-for="(item, index) in funcList" :key="index" @click="go(item.path)">
				<view class="func-item">
					<view style="display: flex;flex-direction: row;">
						<van-image width="48rpx" height="48rpx" :src="'/static/owo/icon'+index+'.png'" />
						<text class="white-font item-content">{{ item.name }}</text>
						<!-- <button v-else open-type="contact" style="flex: 1;height: 60rpx;color: #ffffff;background-color: rgba(0,0,0,0);padding-left: 10rpx;line-height: 60rpx;height: 90rpx;
								">联系客服</button> v-if="item.name!='联系客服'"-->
					</view>

					<view class="list-last">
						<image src="/static/owo/mine-list-go.png" class="icongo"></image>
					</view>
				</view>
			</view>
		</view>

		<view class="logout" @click="logout" v-if="user.referenceCode">
			退出登录
		</view>
		<tarbar :active="3"></tarbar>

	</view>
</template>

<script>
	import tarbar from '@/wxcomponents/tarbar'
	import {
		loadWallet,
		loadUserInfo
	} from '@/api/user'
	export default {
		components: {
			tarbar
		},
		data() {
			return {
				title: 'Hello',
				user: {
					avatar: '/static/owo/avatar.png',
					nickname: '',
					referenceCode: '',
					token: ""
				},
				wallet: {
					balance: 0,
					score: 0,
					ticket: 0
				},

				funcList: [
					{
						'name': '积分商城',
						'path': '/pages/subPackage/mall'
					},
					{
						'name': '我的优惠券',
						'path': '/pages/subPackage/cupon'
					},
					{
						'name': '对战记录',
						'path': '/pages/subPackage/BattleRecord'
					},
					{
						'name': '消费记录',
						'path': '/pages/subPackage/Consumptionrecord'
					},
					{
						'name': '地址管理',
						'path': '/pages/subPackage/address/index'
					},
					{
						'name': '反馈与投诉',
						'path': '/pages/subPackage/question/index'
					}
				]
			}
		},
		onShow: function(options) {
			const token = uni.getStorageSync("token")
			if (token) {
				this.getUserInfo()
				this.loadWallet()
			}
		},
		methods: {
			copyTextToClipboard(text) {
				uni.setClipboardData({
					data: text,
					success: function() {
						console.log('复制成功');
						// 可以添加用户友好的提示，例如使用uni.showToast提示复制成功
						uni.showToast({
							title: '复制成功',
							icon: 'success',
							duration: 2000
						});
					},
					fail: function() {
						console.log('复制失败');
						// 可以添加错误处理或用户友好的提示
					}
				});
			},
			async getUserInfo() {
				const token = uni.getStorageSync("token")
				let userInfo = {}
				if (token) {
					const userRes = await loadUserInfo()
					userInfo = userRes.data || {}
				}

				const avatar = userInfo.avatar || ''
				const userId = userInfo.user_id || ''
				const nickname = userInfo.nickname || ''
				const referenceCode = userInfo.reference_code || ''
				uni.setStorageSync('avatar', avatar)
				uni.setStorageSync('userId', userId)
				uni.setStorageSync('nickname', nickname)
				uni.setStorageSync('referenceCode', referenceCode)

				this.user = {
					avatar: avatar,
					nickname: nickname,
					referenceCode: referenceCode,
					token: token
				}
			},
			async loadWallet() {
				const token = uni.getStorageSync("token")
				let score = 0
				let ticket = 0
				if (token) {
					const res = await loadWallet()
					const data = res.data || {}
					score = data.score || 0
					ticket = data.ticket || 0
				}

				this.wallet = {
					balance: 0,
					score: score,
					ticket: ticket,
				}
			},
			logout() {
				uni.clearStorageSync()
				this.user = {
					avatar: '/static/icons/mine/avatar.png',
					nickname: '',
					referenceCode: '',
					token: ""
				}
				this.wallet = {
						balance: 0,
						score: 0,
						ticket: 0
					},
					this.gotoLogin()
			},
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/index'
				})
			},
			gotoscorelist() {
				// uni.navigateTo({
				// 	url: '/pages/subPackage/ticketlist'
				// })
				uni.navigateTo({
					url: '/pages/subPackage/rechargelog'
				})
				
			},
			gototicketlist() {

				uni.navigateTo({
					url: '/pages/subPackage/scorelist'
				})
			},
			go(path) {
				console.log('-------go', path, this.user)
				if (this.user.token) {
					if (path) {
						uni.navigateTo({
							url: path
						})
					}
				} else {
					this.gotoLogin()
				}
			}
		}
	}
</script>
<style scoped lang="scss">
	@import "src/static/scss/common";

	.mine-bg {
		position: absolute;
		top: 0;
		bottom: 0;
		width: 100%;
		opacity: 1;
		background: #18181C;
		background-image: url("/static/owo/user_bg.png");
		background-position: 0 0;
		background-repeat: no-repeat;
		background-size: contain;
		display: flex;
		flex-direction: column;
	}

	.user-info-box {
		padding-top: 260rpx;
		padding-left: 25rpx;
		box-sizing: border-box;
		height: 62rpx;
		width: 100%;
		display: flex;
		justify-content: left;
		align-items: center;
		// background-image: url("https://dongke-common.oss-cn-shenzhen.aliyuncs.com/garage-kit/userbg.png");
		// background-position: 0;
		// background-repeat: no-repeat;
		// background-size: cover;
		padding-bottom: 60px;
		// background: linear-gradient(to bottom, rgb(130, 90, 134) 0%, rgba(10, 5, 11, 1));
		/* 红色向黄色渐变 */

	}

	.user-info {
		padding-left: 36rpx;
		height: 100rpx;

		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.wallet-box {
		height: 140rpx;
		display: flex;
		flex-direction: row;
		align-items: center;
		margin: 0rpx 25rpx 0;
		background-image: url("/static/owo/user_poing_bg.png");
		background-position: 0;
		background-repeat: no-repeat;
		background-size: cover;

		.wallet-item {
			width: 100%;
			text-align: center;
			align-items: center;
			display: flex;
			flex-direction: column;
			justify-content: center;

			.wallet_title {
				display: flex;
				height: 80rpx;
				align-items: center;
				justify-content: center;

				.title {
					font-size: 28rpx;
					color: #FFFFFF;
				}

				.icongo {
					margin-left: 6rpx;
					width: 16rpx;
					height: 24rpx;
				}
			}
		}

		.wallet-price {
			font-size: 44rpx;
			color: #ffffff;
			font-weight: bold;
		}
	}

	.func-box {
		padding-top: 60rpx;
		font-size: 36rpx;
	}

	.func-item {
		height: 105rpx;
		margin-left: 50rpx;
		border-bottom: solid 1rpx rgba(255, 255, 255, 0.20);
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: space-between;

		.item-content {
			padding-left: 10rpx;
			color: #FFFFFF;
		}

		.list-last {
			padding-right: 40rpx;

			.icongo {
				width: 16rpx;
				height: 24rpx;
			}
		}
	}

	.logout {
		width: 100%;
		text-align: center;
		height: 80rpx;
		line-height: 80rpx;
		margin-top: 40rpx;
		color: #ffffff;
		font-size: 32rpx;
	}
</style>